
<!-- Copyright IBM Corp, All Rights Reserved.

 SPDX-License-Identifier: Apache-2.0
-->

{% extends "layout.html" %}
{% block title %}Users{% endblock %}
{% block body %}
    {{ super() }}
    <div id="users">
        <h2 class="page-header">Users: {{ items_count }}
            <v-button type="success" size="large" style="float: right" @click="showModal">Create User</v-button>
        </h2>
        <v-data-table ref="userTable" :data='loadData' :columns='columns' strip bordered>
            <template slot="td" scope="props">
                <div v-if="props.column.field=='role'">
                    <span v-html="rolesShown[props.content]"></span>
                </div>
                <div v-else-if="props.column.field=='timestamp'">
                    <span v-html="unixMoment(props.content)"></span>
                </div>
                <div v-else-if="props.column.field=='id'">
                    <v-dropdown :data="operations(props.item)" @item-click="operationClick">
                        <a href="javascript:void(0)" class="ant-dropdown-link ant-dropdown-trigger">
                            Operate <v-icon type="down"></v-icon>
                        </a>
                    </v-dropdown>
                </div>
                <span v-else v-html="props.content"></span>
            </template>
        </v-data-table>
        <v-modal :title="modalTitle"
                 okText="confirmText"
                 cancelText="cancelText"
                 :visible="visible"
                 :confirm-loading="handling"
                 @ok="handleOk"
                 @cancel="handleCancel">
            <v-form direction="horizontal" ref="userForm" :model="userForm">
                <v-form-item label="User Name" :label-col="labelCol" :wrapper-col="wrapperCol" has-feedback prop="username">
                    <v-input placeholder="User Name" size="large" v-model="userForm.username"></v-input>
                </v-form-item>
                <v-form-item v-if="method == 'create'" label="Password" :label-col="labelCol" :wrapper-col="wrapperCol" has-feedback prop="password">
                    <v-input placeholder="Password" size="large" v-model="userForm.password"></v-input>
                </v-form-item>
                <v-form-item label="Role" :label-col="labelCol" :wrapper-col="wrapperCol" prop="role">
                    <v-select v-model="userForm.role" placeholder="Please select a role" notfound="has no role" :data="roles"></v-select>
                </v-form-item>
                <v-form-item label="Blue Points" :label-col="labelCol" :wrapper-col="wrapperCol" prop="balance">
                    <v-input-number v-model="userForm.balance" :min="0" :max="9999"></v-input-number>
                </v-form-item>
                <v-form-item label="Active" :label-col="labelCol" :wrapper-col="wrapperCol" props="active">
                    <v-switch v-model="userForm.active"></v-switch>
                </v-form-item>
            </v-form>
            <div slot="footer">
                <v-button key="cancel" type="ghost" size="large" @click="handleCancel">
                    Cancel
                </v-button>
                <v-button key="confirm" type="primary" size="large" :loading="handling" @click="handleOk">
                    Confirm
                </v-button>
            </div>
        </v-modal>
    </div>
{% endblock %}
{% block custom_js %}
    <script src="{{ url_for('static', filename='js/routes/users.js') }}"> </script>
{% endblock %}